<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ESP8266 Alarm</title>

  <style>
    body {
      background-color: #1782dd;
    }

    div {
      margin: 0 auto;
      width: 100%;
      display: block;
      border: 1pt;
      border-style: groove;
      margin-bottom: 3pt;
    }

    li {
      list-style: none;
      margin-left: -30pt;
    }

    .tblAlarmList th {
      background: #87d0fa;
    }

    .tblAlarmList td {
      background: #e9faff;
      text-align: center;
    }

    .trash.icon {
      color: #000;
      position: absolute;
      margin-left: -4px;
      margin-top: -3px;
      width: 9px;
      height: 12px;
      border-left: solid 1px currentColor;
      border-right: solid 1px currentColor;
      border-bottom: solid 1px currentColor;
      border-radius: 0 0 2px 2px;
    }

    .trash.icon:after {
      content: '';
      position: absolute;
      left: 2px;
      top: -5px;
      width: 6px;
      height: 2px;
      border-left: solid 1px currentColor;
      border-right: solid 1px currentColor;
      border-top: solid 1px currentColor;
      border-radius: 4px 4px 0 0;
    }

    .ServoOperateValue {
      width: 35px;
    }

    .showtimespan p {
      text-align: center;
      height: 1px;
    }

    .lidcap,
    .lid,
    .bin {
      position: absolute;
    }

    .lidcap,
    .lid {
      /*垃圾桶顶 和 垃圾桶盖 */
      border-top-left-radius: 2.8px;
      /*圆角*/
      border-top-right-radius: 2.8px;
      /*圆角*/
      background: #111111;
      /*颜色*/
      transition: transform .2s linear, margin .2s linear;
      /*过滤效果*/
    }

    .lidcap {
      /*构建垃圾筒顶*/
      bottom: 25px;
      left: 33px;
      height: 3px;
      width: 6px;
    }

    .lid {
      /*构建垃圾筒盖*/
      bottom: 20px;
      left: 25px;
      width: 21px;
      height: 4px;
    }

    .bin {
      /*构建垃圾筒*/
      bottom: 0;
      left: 28px;
      width: 11px;
      border-top: 20px solid #111111;
      border-left: 3.5px solid transparent;
      border-right: 3.5px solid transparent;
    }
  </style>

  <script>
    var trNum = 0;
    var alarmList;

    function setTime() {
      var t = new Date();
      var sendStr;
      var obj;
      /*      str = 'currtime=' + Math.floor((t.getTime() - (t.getTimezoneOffset() * 60000)) / 1000);*/
      obj = {
        "current time": Math.floor((t.getTime() - (t.getTimezoneOffset() * 60000)) / 1000)
      }
      sendStr = JSON.stringify(obj);
      var xmlhttp;
      if (window.XMLHttpRequest) {
        xmlhttp = new XMLHttpRequest();
      } else {
        xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
      }
      xmlhttp.open('GET', 'updateTime?data=' + sendStr, true);
      xmlhttp.send();
    }

    function toggleLight() {
      var xmlhttp;
      if (window.XMLHttpRequest) {
        xmlhttp = new XMLHttpRequest();
      } else {
        xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
      }
      xmlhttp.open('GET', 'toggleLight', true);
      xmlhttp.send();
    }

    function alarmAddRow(x) {
      console.log(x)
      // 添加一行
      var newTr = tableAlarmList.insertRow(tableAlarmList.rows.length);
      // 为新添加的行添加元素
      newTr.insertCell().innerHTML = x.day;
      newTr.insertCell().innerHTML = x.hour + ":" + x.minute;
      newTr.insertCell().innerHTML = x.operate;
      newTr.insertCell().innerHTML = "<button onclick='alarmDelRow(value)' class='trash icon' value = " + trNum +
        "></button>";
      trNum++;
    }

    function alarmDelRow(x) {
      var sendStr;
      var obj;
      var xmlhttp;

      sendStr = "";
      if (alarmList[x].hour < 10) {
        sendStr += "0" + alarmList[x].hour;
      } else {
        sendStr += alarmList[x].hour;
      }
      if (alarmList[x].minute < 10) {
        sendStr += ":" + "0" + alarmList[x].minute;
      } else {
        sendStr += ":" + alarmList[x].minute;
      }
      obj = {
        "Remove alarm": {
          "day": parseInt(alarmList[x].day),
          "time": sendStr,
          "operate": alarmList[x].operate
        }
      }
      sendStr = JSON.stringify(obj);
      console.log('Remove alarm:' + sendStr);
      if (window.XMLHttpRequest) {
        xmlhttp = new XMLHttpRequest();
      } else {
        xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
      }
      xmlhttp.onreadystatechange = function () {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
          retStr = xmlhttp.responseText;
          console.log(retStr);
          obj = JSON.parse(retStr);
          if (obj["Remove alarm response"]["state"] != "success") {
            alert("删除闹钟出错！错误信息:\n" + obj["Remove alarm response"]["err info"]);
          }
          showAlarm();
        }
      },
        xmlhttp.open('GET', 'removeAlarm?data=' + sendStr, true);
      xmlhttp.send();
    }

    function showAlarm() {
      var xmlhttp;
      console.log("show Alarm")
      if (window.XMLHttpRequest) {
        xmlhttp = new XMLHttpRequest();
      } else {
        xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
      }
      xmlhttp.onreadystatechange = function () {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
          var retStr;
          retStr = xmlhttp.responseText;
          console.log(retStr);
          var obj = JSON.parse(retStr);
          alarmList = obj["alarm"];
          for (; trNum; trNum--) {
            tableAlarmList.deleteRow(tableAlarmList.rows.length - 1);
          }
          if (alarmList != "None") {
            for (let x of alarmList) {
              alarmAddRow(x);
            }
          }
        }
      },
        xmlhttp.open('GET', 'showAlarm', true);
      xmlhttp.send();
    }

    function addAlarm() {
      var xmlhttp;
      var retStr;
      var sendStr;
      var obj;
      console.log("show Alarm")
      if (window.XMLHttpRequest) {
        xmlhttp = new XMLHttpRequest();
      } else {
        xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
      }

      var operList = document.getElementsByName("alarmOperateName");
      var radioVal = 0;
      for (var i = 0; i < operList.length; i++) {
        if (operList[i].checked) {
          radioVal = operList[i].value;
        }
      }
      obj = {
        "Add alarm": {
          "day": parseInt(document.getElementById("alarmDayId").value),
          "time": document.getElementById("alarmTimeId").value,
          "operate": parseInt(radioVal)
        }
      }
      sendStr = JSON.stringify(obj);
      console.log("Add alarm:" + sendStr);
      xmlhttp.onreadystatechange = function () {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
          retStr = xmlhttp.responseText;
          console.log(retStr);
          /*obj = {
            "Add alarm response": {
              "state": "success" / "failed",
              "err info": ""
            }
          }*/
          obj = JSON.parse(retStr);
          if (obj["Add alarm response"]["state"] != "success") {
            alert("设置闹钟出错！错误信息:\n" + obj["Add alarm response"]["err info"]);
          }
        }
      },
        xmlhttp.open('GET', 'setAlarm?data=' + sendStr, true);
      xmlhttp.send();
      showAlarm();
    }

    function showRangeNum() {
      var r = document.getElementById("ChangeRange");
      document.getElementById("showRangeText").value = r.value;
    }

    function sendChangeRange() {
      var xmlhttp;
      var sendStr;
      var obj;
      var r = document.getElementById("showRangeText");
      var e = document.getElementById("changeRangeEvent");
      document.getElementById("ChangeRange").value = r.value;
      obj = {
        "operate": parseInt(e.value),
        "value": parseInt(r.value)
      };
      if (window.XMLHttpRequest) {
        xmlhttp = new XMLHttpRequest();
      } else {
        xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
      }
      /*
      xmlhttp.onreadystatechange = function () {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
          var retStr = xmlhttp.responseText;
        }
      }, */
      xmlhttp.open('GET', 'changeRange?data=' + JSON.stringify(obj), true);
      xmlhttp.send();
    }

    function getMcuStatus() {
      var xmlhttp;
      console.log('get MCU Time log');
      if (window.XMLHttpRequest) {
        xmlhttp = new XMLHttpRequest();
      } else {
        xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
      }
      xmlhttp.onreadystatechange = function () {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
          var retStr = xmlhttp.responseText;
          var obj = JSON.parse(retStr);
          // console.log(retStr);
          document.getElementById('MCUTime').innerHTML = obj["status"]["mcu time"];
          document.getElementById('lightStatus').innerHTML = obj["status"]["light state"];
          document.getElementById("showOpenLightRangeText").value = obj["status"]["operate range"]["open light"];
          document.getElementById("showCloseLightRangeText").value = obj["status"]["operate range"]["close light"];
        }
      },
        xmlhttp.open('GET', 'getMcuStatus', true);
      xmlhttp.send();
    }

    function McuReset() {
      var xmlhttp;
      console.log("Reset MCU!");
      if (window.XMLHttpRequest) {
        xmlhttp = new XMLHttpRequest();
      } else {
        xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
      }
      xmlhttp.onreadystatechange = function () {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { }
      },
        xmlhttp.open('GET', 'mcuReset', true);
      xmlhttp.send();
    }

    function OTAUpDdateProg() {
      var xmlhttp;
      console.log("OTA update!");
      if (window.XMLHttpRequest) {
        xmlhttp = new XMLHttpRequest();
      } else {
        xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
      }
      xmlhttp.onreadystatechange = function () {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { }
      },
        xmlhttp.open('GET', 'otaUpdate', true);
      xmlhttp.send();
    }

    function showLog() {
      var xmlhttp;
      console.log("show Log");
      if (window.XMLHttpRequest) {
        xmlhttp = new XMLHttpRequest();
      } else {
        xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
      }
      xmlhttp.onreadystatechange = function () {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
          var retStr;
          retStr = xmlhttp.responseText;
          /*console.log(retStr);
          var obj = JSON.parse(retStr);
          alarmList = obj["alarm"];*/
          document.getElementById("showLogText").innerText = retStr;
        }
      },
        xmlhttp.open('GET', 'showLog', true);
      xmlhttp.send();
    }

    function showSensorData() {
      var xmlhttp;
      var obj, sendStr;
      console.log("show sensor data");
      if (window.XMLHttpRequest) {
        xmlhttp = new XMLHttpRequest();
      } else {
        xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
      }
      obj = {
        "len": parseInt(document.getElementById("showSensorLenId").value)
      }
      sendStr = JSON.stringify(obj);
      xmlhttp.onreadystatechange = function () {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
          var retStr;
          retStr = xmlhttp.responseText;
          document.getElementById("showSensorDataText").innerText = retStr;
        }
      },
        xmlhttp.open('GET', 'showSensorData?data=' + sendStr, true);
      xmlhttp.send();
    }

    function deleteLog() {
      var xmlhttp;
      console.log("delete Log");
      if (window.XMLHttpRequest) {
        xmlhttp = new XMLHttpRequest();
      } else {
        xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
      }
      xmlhttp.onreadystatechange = function () {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
          var retStr;
          retStr = xmlhttp.responseText;
          var obj = JSON.parse(retStr);
          if (obj["state"] != "success") {
            alert("删除Log出错！错误信息:\n" + obj["err info"]);
          }
        }
      },
        xmlhttp.open('GET', 'deleteLogFile', true);
      xmlhttp.send();
    }

    function deleteSensorData() {
      var xmlhttp;
      console.log("delete Log");
      if (window.XMLHttpRequest) {
        xmlhttp = new XMLHttpRequest();
      } else {
        xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
      }
      xmlhttp.onreadystatechange = function () {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
          var retStr;
          retStr = xmlhttp.responseText;
          var obj = JSON.parse(retStr);
          if (obj["state"] != "success") {
            alert("删除Sensor Data出错！错误信息:\n" + obj["err info"]);
          }
        }
      },
        xmlhttp.open('GET', 'deleteSensorDataFile', true);
      xmlhttp.send();
    }

    function WindowOnload() {
      setInterval('getMcuStatus()', 500);
      showAlarm();
    }
  </script>
</head>

<body onload="WindowOnload()">
  <div>
    <span style='font-size: 28px;' class="showtimespan" id='MCUTime'>
    </span>
    <br>
    <button onclick='setTime()'>Update Time</button>
  </div>
  <div>
    <h4 id="lightStatus"></h4>
    <button onclick='toggleLight()'>Toggle</button>
  </div>
  <div>
    <table class="tblAlarmList" id="tableAlarmList" width="100%" cellspacing="1" cellpadding="4" bgcolor="#cccccc"
      align="center">
      <tr>
        <th>day</th>
        <th>time</th>
        <th>operation</th>
        <th style="width: 20pt;">delete</th>
      </tr>
    </table>
    <!-- <button onclick="showAlarm()">showAlarm</button> -->
  </div>
  <div>
    <span>
      星期:
      <select name="day" id="alarmDayId">
        <!-- <option value="1">Monday</option>
          <option value="2">Tuesday</option>
          <option value="3">Wednesday</option>
          <option value="4">Thursday</option>
          <option value="5">Friday</option>
          <option value="6">Saturday</option>
          <option value="7">Sunday</option> -->
        <option value="1">周一</option>
        <option value="2">周二</option>
        <option value="3">周三</option>
        <option value="4">周四</option>
        <option value="5">周五</option>
        <option value="6">周六</option>
        <option value="7">周日</option>
      </select>
    </span>
    <span style="margin-left: 15pt;">
      时间:
      <input type='time' name='time' id="alarmTimeId" value="07:05">
    </span>
    <br>
    <span style="margin-left: 15pt;">
      操作:
      <span><input type='radio' name='alarmOperateName' value='1' checked>Open</span>
      <span><input type='radio' name='alarmOperateName' value='2'>Close</span>
    </span>
    <br>
    <button onclick="addAlarm()">添加闹钟事件</button>
  </div>
  <div>
    <table>
      开灯:
      <input type="text" id="showOpenLightRangeText" class="ServoOperateValue" value="0" readonly>
      关灯:
      <input type="text" id="showCloseLightRangeText" class="ServoOperateValue" value="0" readonly>
      <tr>
        <td>
          <select name="day" id="changeRangeEvent">
            <option value="1">开灯</option>
            <option value="2">关灯</option>
            <!-- <option value="3">周三</option>
            <option value="4">周四</option>
            <option value="5">周五</option>
            <option value="6">周六</option>
            <option value="7">周日</option> -->
          </select>
        </td>
        <td>
          <input type="text" id="showRangeText" class="ServoOperateValue" value="0">
        </td>
        <td>
          <input type="range" id="ChangeRange" width="500pt" value="0" min="0" max="180" oninput="showRangeNum()">
        </td>
        <td>
          <button onclick="sendChangeRange()">更改</button>
        </td>
      </tr>
      <!-- <tr>
        <td>返回时:</td>
        <td>
          <input type="text" id="showRangeText" class="ServoOperateValue">
        </td>
        <td>
          <input type="range" id="ChangeRange" value="55" min="0" max="180" onchange="showRange1()"
            oninput="showRange()">
        </td>
      </tr> -->
    </table>
  </div>
  <div>
    <button onclick="McuReset()">重启</button>
    <button onclick="OTAUpDdateProg()">OTA升级</button>
  </div>
  <div>
    显示的数量:
    <input type="number" id="showSensorLenId" class="ServoOperateValue" value="25">
    <button onclick="showSensorData()">显示传感器数据</button>
    <button onclick="deleteSensorData()">删除传感器数据</button>
    <br>
    <span id="showSensorDataText"></span>
  </div>
  <div>
    <button onclick="showLog()">显示日志</button>
    <button onclick="deleteLog()">删除日志</button>
    <br>
    <span id="showLogText"></span>
  </div>
</body>

</html>